<template>
	<div class="helper">
		<span class="left">{{unFinishedTodoLength}} items left</span>
		<span class="tabs">
			<span 
				v-for="state in states"
				:key="state"
				class="[state,filter===state? 'active':'']" 
				@click="toggleFilter(state)" 
			>
				{{state}}
			</span>
			<span class="clear" @click="clearAllCompleted">清楚全部已完成</span>
		</span>
			
	</div>
</template>
<script>
	export default {
		props: {
			filter: {
				type: String,
				required: true
			},
			todos:{
				type: Array,
				required: true
			}
		},
		data() {
			return {
				states: ['all','active','completed']
			}
		},
		computed: {
			unFinishedTodoLength() {
				return this.todos.filter(todo => !todo.completed).length
			}
		},
		methods: {
			toggleFilter(state) {
				this.$emit('toggle',state)
			},
			clearAllCompleted() {
				this.$emit('clearAll')
			}
		}
	}
</script>
<style scoped>
	.helper{
		color:red;
	}
</style>